<app-common-page>
    <div class="login-form-body">
        <div class="login-form-box">
            <p>{{'title' | translate}}</p>
            <img src="../../../../assets/img/login-left.png" />
            <form nz-form class="form" [formGroup]="loginForm">
                <div class="language">
                    <nz-dropdown [nzTrigger]="'click'">
						<a nz-dropdown>
							<img *ngIf="lang.lang === 'zh'" src="../../../../assets/img/ch.png" />
							<img *ngIf="lang.lang === 'en'" src="../../../../assets/img/en.png" />
							<img *ngIf="lang.lang === 'jp'" src="../../../../assets/img/jp.png" />
							<i nz-icon nzType="caret-down" nzTheme="outline"></i>
						</a>
                        <ul nz-menu class="language-list">
                            <li nz-menu-item (click)="changeLang('zh')"><img src="../../../../assets/img/ch.png" style="width: 50px;" /></li>
                            <li nz-menu-item (click)="changeLang('en')"><img src="../../../../assets/img/en.png" style="width: 50px;" /></li>
                            <li nz-menu-item (click)="changeLang('jp')"><img src="../../../../assets/img/jp.png" style="width: 50px;" /></li>
                        </ul>
                    </nz-dropdown>
                </div>
                <h2>{{'pages.login.login'|translate}}</h2>
                <nz-form-item>
                    <label>{{'pages.login.loginId'|translate}}</label>
                    <input nz-input formControlName="loginId" placeholder="{{'pages.login.loginIdP'|translate}}" name="loginId" type="text" id="loginId" />
                    <nz-form-explain *ngIf="loginForm.get('loginId').dirty && loginForm.get('loginId').errors">{{'pages.login.loginIdP'|translate}}!</nz-form-explain>
                </nz-form-item>
                <nz-form-item>
                    <label>{{'pages.login.pwd'|translate}}</label>
                    <input nz-input formControlName="loginPw" placeholder="{{'pages.login.pwdP'|translate}}" name="loginPw" type="password" id="loginPw" />
                    <nz-form-explain *ngIf="loginForm.get('loginPw').dirty && loginForm.get('loginPw').errors">{{'pages.login.pwdP'|translate}}!</nz-form-explain>
                </nz-form-item>
                <nz-form-item>
                    <label>{{'pages.login.code'|translate}}</label>
                    <nz-input-group nzSearch [nzAddOnAfter]="suffixIconButton">
                        <input nz-input formControlName="imageCode" placeholder="{{'pages.login.codeP'|translate}}" name="imageCode" type="text" id="imageCode" />
                    </nz-input-group>
                    <ng-template #suffixIconButton>
                        <img
                            (click)="onChangImgCode()"
                            style="height:36px;border-radius: 0 4px 4px 0;"
                            src="/api/generateImageVerifyCode.do?imageVerifyCodeId={{ imageVerifyCodeId }}&k={{ e }}"
                        />
                    </ng-template>
                    <nz-form-explain *ngIf="loginForm.get('imageCode').dirty && loginForm.get('imageCode').errors">{{'pages.login.codeP'|translate}}!</nz-form-explain>
                </nz-form-item>
                <nz-form-item>
                    <nz-form-control>
                        <button nz-button [nzType]="'primary'" (click)="submit()" [disabled]="loginForm.invalid">{{'pages.login.login'|translate}}</button>
                    </nz-form-control>
                </nz-form-item>
            </form>
        </div>
    </div>
</app-common-page>
